﻿<!DOCTYPE html>
<html ng-app="filterApp">
<head>
    <title></title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/angular-locale_zh-cn.js"></script>
    <script>
        angular.module("filterApp", [])
        .controller("defaultCtrl", function ($scope) {
            $scope.products = [
                { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
                { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
                { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },
                { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
                { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },
                { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
                { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
                { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
                { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
            ];
            $scope.getExpiryDate = function (days) {
                var now = new Date();
                return now.setDate(now.getDate() + days);
            }
        });
    </script>
</head>
<body>
    <div class="container" ng-controller="defaultCtrl">
        <div class="panel-heading">
            <h3>
                所有商品
                <span class="label label-primary">{{products.length}}</span>
            </h3>
        </div>
        <div class="panel-body">
            <table class="table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <th>商品名称</th>
                        <th>类别</th>
                        <th>过期时间</th>
                        <th>价格</th>
                        <th>Json表达形式</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="p in products">
                        <td>{{p.name | uppercase }}</td>        <!-- 小写-->
                        <td>{{p.category | lowercase }}</td>    <!-- 大写-->
                        <td>
                            {{getExpiryDate(p.expiry) | date }} |
                            {{getExpiryDate(p.expiry) | date :"yyyy-MM-dd"}} |
                            {{getExpiryDate(p.expiry) | date :"shortDate"}}
                        </td>
                        <td class="text-right">
                            {{p.price | currency}} |            <!-- 根据添加的locale JS文件确定格式 -->
                            {{p.price | currency:"RMB"}}    |   <!-- 在数字前加上"RMB"前缀 -->
                            {{p.price | number:1 }}             <!-- 保留1个有效数字，有必要时添加千分符-->
                        </td>
                        <td colspan="4">
                            {{p | json}}        <!-- 将p以json字符串形式输出 -->
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
